/* styles.css 文件内容 */
/* styles.css */
/* 控制面板容器样式 */
.controls-container {
    position: fixed;
    left: 50%;
    /* 或者任何你想要的边距 */
    bottom: 10px;
    /* 和按钮容器保持一致 */
    transform: translateX(-50%);
    /* 向左偏移自身宽度的一半以确保真正居中 */
}

/* 下拉框样式 */

.mode-selector,
.image-selector {
    font-size: 1.3em;
    /* 设置字体大小 */
    padding: 10px 50px;
    /* 设置内边距 */
    margin-right: 5px;
    /* 与按钮之间的间距 */
    cursor: pointer;
    /* 鼠标悬停时显示手指图标 */
    width: auto;
}


/* 按钮样式 */
.button {
    font-size: 1.5em;
    padding: 10px 50px;
    cursor: pointer;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
}


/* 图片容器样式 */
.image-container {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    margin-top: 20px;
    /* 距离页面顶部的间距 */
}

/* 图标样式 */
.fas {
    margin-right: 5px;
    /* 图标和文本之间的间距 */
}